<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="icon/font/bootstrap-icons.min.css" />
		
    <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="css/all.css" rel="stylesheet" type="text/css"/>

        
    <script src="js/jquery-3.6.0.min.js" ></script>
	<script src="js/bootstrap.bundle.min.js"></script>  
    <script src="js/plugins/buffer.min.js" ></script>
    <script src="js/plugins/filetype.min.js"></script>
    <script src="js/fileinput.js"></script>
    
    <script src="themes/fa5/theme.js" ></script>

</head>
<body>
<div class="container my-4">
    <form enctype="multipart/form-data">
        <div class="form-group">
            <div class="file-loading">
                <label>Preview File Icon</label>
                <input id="file-3" type="file" multiple class="file"
                       data-overwrite-initial="false" data-theme="fa5">
            </div>
			<div class="custom-control  custom-switch ml-2" id="isPhoneCap" style="display:inline-block;">
				<input type="checkbox" class="custom-control-input" id="chkPhoneCap">
				<label class="custom-control-label" for="chkPhoneCap">手机拍照</label>
			</div>
        </div>
    </form>
</div>
</body>
<script>



    /*
     $(".file").on('fileselect', function(event, n, l) {
     alert('File Selected. Name: ' + l + ', Num: ' + n);
     });
     */


	$("#file-3").fileinput({
		theme: 'fa5',
		uploadUrl: 'http://127.0.0.1/uploadFiles',
		enableResumableUpload: true,
		showUpload: true,
		showCaption: false,
		browseClass: "btn btn-primary",
		uploadClass: "btn btn-primary",
		fileType: "image",
		//previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
		removeLabel: "删除全部",
		uploadLabel: "上传全部",
		browseLabel: "选取图片",
		previewFileType: "image",
		//dropZoneEnabled: false,
		dropZoneTitle: "请选择本地文件或手机拍照",
		showDescriptionClose: false,
	});
	
	//setTimeout(function(){$('#isPhoneCap').insertAfter($('div.theme-fa5>span>button'));}, 1000)
	//$('#isPhoneCap').insertAfter($('div.theme-fa5>span>button'));
	$('#isPhoneCap').insertAfter($('div.btn-file')).find('#chkPhoneCap').change(function(){
		$camera = document.querySelector("#file-3");		
		if (this.checked == true){			
			$camera.setAttribute("capture", "user");
		}else{
			$camera.removeAttribute("capture");
		}		
	});
	$('div.theme-fa5>span').prependTo($('div.theme-fa5'))

    $(function () {
		

    });
</script>
</html>